<template>
  <section>
    <h2>Hello Vuex</h2>
    用户名：<input v-model="formData.name"/>
    学校：<input v-model="formData.school"/>
    电话：<input v-model="formData.mobile"/>
    年龄：<input v-model="formData.age"/>
    <button @click="handleClick">登录</button>
    <sub-a></sub-a>
    <sub-b></sub-b>
  </section>
</template>

<script>

import subA from "./sub-a";
import subB from "./sub-b";

export default {
    components: {subA,subB},
    data() {
        return {
            formData: {
                name: ""
            },
        }
    },
    methods: {
        handleClick() {
            /* 
            * commit：提交更改，调用mutaions中第一的方法。
            * 参数1: mutaions中定义的方法名
            * 参数2: 提交的数据，在mutaions中方法的第二个参数获取
            */
            // this.$store.commit("setUserName",this.formData.name);
            // this.$store.commit("setUser",this.formData);

            // commit可以使用对象方式来传参
            this.$store.commit({
                type: "setUser",
                payload: this.formData,
            })
        }
    }
}
</script>

<style>

</style>